//@ts-nocheck
import React, { useEffect, useImperativeHandle, useRef } from 'react'
import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/line'
import { ColorGamut } from '../colorConfig'
import './index.less'

let data: Array<any>
const StaggerLineChart = ({ options, chartRef, chartId }) => {
  const echartsInstance = useRef(null)

  useEffect(() => {
    echartsInstance.current = echarts.init(document.getElementById(chartId || 'stagger-line-chart'))
  }, [])

  useEffect(() => {
    data = options
    if (echartsInstance) setOptions()
  }, [options])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance.current
    }
  }))

  const setOptions = () => {
    let topBarList = []
    let bottomBarList = []
    let xData = []
    let titleData = ['高于均值', '低于均值']

    topBarList = data.map((item) => {
      if (item.value >= 0) {
        return item.value
      } else {
        return undefined
      }
    })
    bottomBarList = data.map((item) => {
      if (item.value < 0) {
        return item.value
      } else {
        return undefined
      }
    })
    xData = data.map((item) => {
      return item.name
    })

    echartsInstance.current.setOption({
      axisPointer: {
        link: [
          {
            xAxisIndex: 'all'
          }
        ]
      },
      legend: {
        data: titleData,
        x: 'center',
        bottom: 0,
        itemGap:24,
        itemHeight: 10,
        itemWidth: 8,
        textStyle: {
          color: '#617185'
        }
      },
      color: ColorGamut,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          let returnData = ''
          for (const iterator of params) {
            if (iterator.seriesName !== '' && iterator.value !== undefined) {
              let indexColor = iterator.color
              returnData +=
                '<span style="display:inline-block;margin-right:8px;border-radius:50%;width:10px;height:10px;background:' +
                indexColor +
                '"></span>'
              returnData +=
                '<span style="display:inline-block;font-size: 12px;color: #617185;">' +
                iterator.name +
                '：' +
                iterator.value +
                '</span> </br>'
            }
          }
          return returnData
        }
      },
      grid: [
        {
          top: '5%',
          height: '40%',
          width:'94.5%',
          left: '5.5%'
        },
        {
          top: '53%',
          height: '40%',
          width:'94.5%',
          left: '5.5%'
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#ECEEF1'
            }
          },
          axisLabel: {
            margin: 24,
            textStyle: {
              color: '#8B98A9',
              align: 'right'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 1,
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#ECEEF1'
            }
          },
          axisLabel: {
            margin: 24,
            textStyle: {
              color: '#8B98A9',
              align: 'right'
            }
          }
        }
      ],
      xAxis: [
        {
          type: 'category',
          alignTicks: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            color: '#8B98A9',
            interval: 0,
            formatter: function (params) {
              let newParamsName = '' // 最终拼接成的字符串
              let paramsNameNumber = params.length // 实际标签的个数
              let provideNumber = 4 // 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 计算行数，向上取整
              // 判断是否需要换行
              if (paramsNameNumber > provideNumber) {
                // 循环得到每行的显示内容，p代表行
                for (let p = 0; p < 1; p++) {
                  let tempStr = '' // 表示每一次截取的字符串
                  let start = p * provideNumber // 开始截取的位置
                  let end = start + provideNumber // 结束截取的位置
                  if (p === rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr // 最终拼成的字符串
                }
                if(paramsNameNumber>4){
                  newParamsName= newParamsName.substring(0, newParamsName.length-2)+'...'
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params
              }

              return newParamsName
            }
          },
          axisLine: {
            lineStyle: {
              color: '#DCE0E6',
              width: 1
            }
          },
          data: xData
        },
        {
          type: 'category',
          alignTicks: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#DCE0E6',
              width: 1
            }
          },
          data: xData,
          gridIndex: 1
        }
      ],
      series: [
        {
          name: titleData[0],
          type: 'line',
          symbol: 'circle',
          stack: 'Total',
          barWidth: 40,
          symbolSize: 6,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: topBarList
        },
        {
          name: titleData[1],
          xAxisIndex: 1,
          yAxisIndex: 1,
          type: 'line',
          symbol: 'circle',
          stack: 'Total',
          barWidth: 40,
          symbolSize: 6,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: bottomBarList
        }
      ]
    })
  }

  return <div className="stagger-line-chart" id={chartId || 'stagger-line-chart'} />
}
export default observer(StaggerLineChart)
